<template>
    
    <div class="OptionViewRoot">
        <div class="OptionTitleBox">

            <el-text size="large" class="OptionTitle">设置</el-text>

            <div class="SearchOptionBox">
                <el-input placeholder="搜索应用设置项" v-model="SearchOptionInput.InputValue" :prefix-icon="Search" ></el-input>
            </div>

        </div>
        <div id="OptionItemsRoot">
            <div v-for="(item,index) in OptionList"  @click="item.ClickRun" v-show="item.show" class="OptionItem">
                
                <div class="OptionItempart1">
                    <el-text>
                        <el-icon :size="23">
                            <component :is="item.OptionIcon" />
                        </el-icon>
                    </el-text>

                    <el-text  class="OptionText">{{ item.OptionName }}</el-text>
                </div>
                <div>
                    <component  ref="OptionRefList" :is="item.component" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, markRaw,ref,onMounted,watch } from "vue"
import { Search, Moon } from "@element-plus/icons-vue"
// 图标
import painting from "@/components/Public/MyIcon/painting.vue"

import selectColor from "./selectColor/selectColor.vue";
import DayOrNight from '@/components/DayOrNight/DayOrNight.vue';

let global_Object = getCurrentInstance().appContext.config.globalProperties
global_Object.$BackButton.value = false;  //返回按钮关闭


// 搜索设置框
let SearchOptionInput = reactive({
    InputValue:"",
});
// 检测是否存在 并排除不需要的
watch(SearchOptionInput,(newValue)=>{
    for(let i=0;i<OptionList.length;i++){
        if(OptionList[i].OptionName.search(newValue)){
            
        }
    }
})

// 设置配置项
let OptionList = reactive([
    {
        id:1,
        show:true,
        OptionName: "深色模式",
        OptionIcon: markRaw(Moon),
        component: markRaw(DayOrNight),
        ClickRun:()=>{
            global_Object.$theme.value = !global_Object.$theme.value
        }
    }, {
        id:2,
        show:true,
        OptionName: "颜色主题",
        OptionIcon: markRaw(painting),
        component: markRaw(selectColor),
        ClickRun: () => {
            openColorOption()
        },
    }
])

// OptionList中component的ref列表
let OptionRefList = ref(null)   //不可改值

// 颜色主题设置
let openColorOption;
onMounted(()=>{
    openColorOption = ()=>{
        for(let i=0; i<OptionList.length;i++){
            if(OptionList[i].id == 2){
                OptionRefList.value[i].ColorOption.value = true
            }
        }
    }
})

</script>

<style lang="less" scoped>
.OptionViewRoot {
    display: grid;

    .OptionTitleBox {
        margin-top: 10%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 4%;

        .OptionTitle {
            font-size: 1.5em;
        }

        // 搜索框的样式
        .SearchOptionBox {
            padding-top: 4%;

            :deep(.el-input-group__prepend) {
                border-radius: 95px;
                border: 0;
                box-shadow: 0 0 0 0px;
            }

            :deep(.el-input__wrapper) {
                background-color: var(--SearchOptionInput);
                border-radius: 95px;
                border: 0;
                box-shadow: 0 0 0 0px;
            }

            :deep(.el-input-group__append) {
                border-radius: 95px;
                border: 0;
                box-shadow: 0 0 0 0px;

            }
        }
    }
}

.OptionItem {
    margin-left: 5%;
    margin-right: 5%;
    padding: 3%;
    display: flex;
    align-items: center;
    display: grid;
    grid-template-columns: 5fr 1fr;

    .OptionItempart1 {
        display: flex;
        align-items: center;
        
        .OptionText {
            padding-bottom: 1%;
            padding-left: 0.5em;
            font-size: 15px;
        }
    }
}

    // 渐变动画
    div {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: opacity_to;
    }
</style>